<template>
	<view class="aboutUs">
		<view class="title" v-if="id == '10002'">
			<view class="content" v-html="dataInfo.content"></view>
		</view>
		<view class="feedback row" v-if="id == '10004'">
			<van-cell-group>
			  <van-field
			    :value="dataValue.message"
			    type="textarea"
			    placeholder="请填写您的宝贵意见"
					:autosize=" { minHeight: '200px' }"
					show-word-limit
					maxlength="2000"
			    :border="false"
					@input="feedIpt"
			  />
			</van-cell-group>
			<view class="btn">
				<van-button block round :color="feedColor" @click="feedClick">提交</van-button>
			</view>
		</view>
		<view class="myFavorite" v-if="id == '10003'">
			<view  v-if="favoriteList.length">
				<view class="favorite" v-for="item in favoriteList" :key="item.id" @click="routeFav(item)">
					<text class="favTitle">{{ item.name }}</text>
					<text class="favCon">{{ item.drugs }}</text>
				</view>
			</view>
			<view v-else class="noData">
				<view class="text">暂无收藏数据</view>
			</view>
		</view>
		<van-toast id='van-toast' />
	</view>
</template>

<script>
	import { noticeGetId } from '@/api/common'
	import { userCollectionList, opinionAdd } from '@/api/my'
	export default {
		data() {
			return {
				version_number: '1.0.4',
				dataInfo: {},
				id: '',
				dataValue: {
					message: ''
				},
				favoriteList: [],
				pagination: {
					pageSize: 10,
					pageNum: 1
				},
				total: 0
			}
		},
		computed: {
			feedColor() {
				if (this.dataValue.message) {
					return 'rgba(2, 191, 136, 1)'
				} else {
					return 'rgba(2, 191, 136, .3)'
				}
			}
		},
		onLoad(option) {
			const accountInfo = wx.getAccountInfoSync();
			this.version_number = accountInfo.miniProgram.version // 小程序 版本号
			this.id = option.id;
			if (option.id == '10002') {
				this.getInfo(option.id)
			} else if (option.id == '10004') {
				uni.setNavigationBarTitle({
				　　title: '意见反馈'
				})
			} else if (option.id == '10003') {
				uni.setNavigationBarTitle({
				　　title: '我的收藏'
				})
				this.getUserCollectionList()
			}
		},
		onPullDownRefresh() {
				//下拉的生命周期
			this.pagination.pageNum = 1;
			setTimeout(() => {
				this.getUserCollectionList();
			}, 200)
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1300);
		},
		onReachBottom() {
			if ((this.pagination.pageSize * this.pagination.pageNum) >= this.total) {
				return
			}
			this.pagination.pageNum ++;
			this.getUserCollectionList('more')
		},
		methods: {
			routeFav(item) {
				uni.navigateTo({
					url:`/packageA/pages/signUp/writeCommon?data=${JSON.stringify(item)}`
				})
			},
			getUserCollectionList(mode) {
				userCollectionList(this.pagination).then(res => {
					if (res.status == 1) {
						if (mode == 'more') {
							this.favoriteList = this.favoriteList.concat(res.data.records);
						} else {
							this.favoriteList = res.data.records;
						}
						this.total = res.data.total;
					}
				})
			},
			feedIpt(e) {
				this.dataValue.message = e.detail
			},
			feedClick() {
				if (!this.dataValue.message) {
					return this.$toast.fail('请填写需要反馈意见')
				}
				opinionAdd({content:  this.dataValue.message}).then(res => {
					if (res.status == 1) {
						this.$toast.success(res.message);
						setTimeout(() => {
							uni.navigateBack()
						}, 1600)
					} else {
						this.$toast.fail(res.message);
					}
				})
			},
			getInfo(id) {
				noticeGetId({ id: id }).then(res => {
					this.dataInfo = res.data
					this.dataInfo.content = this.dataInfo.content.replace(/<img.*?>/, function(item){
						if(item.includes('style=')){
								return item.replace(/style="(.*?)(?=\")/, 'style="$1 '+ `width:100%;height:auto;margin-top:20px;`);
						}else{
								return item.replace(/\<img (.*?)(?=\")/, '<img style="'+ `width:100%;height:auto;margin-top:20px;` + '" $1');
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.aboutUs {
		width: 100%;
		min-height: 100vh;
		background-color: #F8F8F8;
		.title {
			padding-top: 60rpx;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 32rpx 32rpx 0;
			box-sizing: border-box;
			text {
				margin-top: 40rpx;
				font-size: 30rpx;
			}
			.content {
				background-color: #FFFFFF;
				padding: 20rpx 16rpx 50rpx;
				border-radius: 16rpx;
			}
		}
		.feedback {
			padding: 32rpx;
			.btn {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				background-color: #FFFFFF;
				padding: 24rpx 32rpx;
				box-sizing: border-box;
			}
		}
		.myFavorite {
			padding: 32rpx;
			.favorite {
				margin-top: 24rpx;
				display: flex;
				flex-direction: column;
				background-color: #FFFFFF;
				border-radius: 8rpx;
				padding: 20rpx 58rpx 24rpx 16rpx;
				box-sizing: border-box;
				word-break: break-all;
				word-wrap: break-word;
				text-align: justify;
				.favTitle {
					font-size: 32rpx;
					color: #333333;
				}
				.favCon {
					font-size: 28rpx;
					color: #666666;
					margin-top: 16rpx;
				}
				&:first-child {
					margin-top: 0;
				}
			}
		}
	}
</style>
